<template>
  <div class="classtimescontainer" v-if="classinfo">
    <el-dialog
      :visible.sync="isShow"
      :close-on-click-modal="modalclose"
      :custom-class="dialogclass"
      :before-close="handleClose"
    >
      <div slot="title" class="panel_title">课节设置</div>
      <div class="classtimes" v-if="tableData.length>0">
        <div class="copybtnBox">
          <div class="copybtn" @click="createClass">创建网络教室</div>
          <div class="copybtn" @click="asyncSyllabus">课件同步</div>
        </div>
        <div class="classtimestable">
          <div class="tablecss">
            <table border="0" style="width:100%;" cellpadding="0" cellspacing="0">
              <thead>
                <tr>
                  <!--双师-->
                  <th>课节序号</th>
                  <th>课节名称</th>
                  <th>上课时间</th>
                  <th>授课教师</th>
                  <th v-if="classinfo.courseType==4">名师</th>
                  <th>课节资源</th>
                  <th>教参资源</th>
                  <th v-if="classinfo.courseType==5">状态</th>
                </tr>
              </thead>
              <tbody v-if="tableData.length>0">
                <tr v-for="li,index in tableData" :key="li.index" v-if="classinfo.courseType==4">
                  <td align="center">{{li.orderBy}}</td>
                  <td align="center">
                    <span>{{li.classSyllabusName}}</span>
                  </td>
                  <td align="center">
                    {{li.startTime.split(' ')[0]}}&nbsp;
                    {{li.weekstr}}&nbsp;
                    {{li.startTime.split(' ')[1]}}-
                    {{li.endTime.split(' ')[1]}}
                  </td>
                  <td align="center">{{li.teacherUserName}}</td>
                  <td align="center">{{li.feiboTeacherName}}</td>
                  <td align="center" style="color:#0094FF;cursor: pointer;">
                    <span @click="ViewSource(1,li)">查看资源</span>
                  </td>
                  <td align="center" style="color:#0094FF;cursor: pointer;">
                    <span @click="ViewSource(2,li)">查看资源</span>
                  </td>
                </tr>

                <tr :key="li.index" v-else>
                  <td align="center">{{li.orderBy}}</td>
                  <td align="center">
                    <span v-if="li.classSyllabusName">
                      {{li.classSyllabusName}}&nbsp;&nbsp;
                      <span
                        @click="modifyName(li)"
                        style="color:#0094FF;cursor: pointer;"
                      >修改</span>
                    </span>
                    <span v-else style="color:#0094FF;cursor: pointer;" @click="addName(li)">添加</span>
                  </td>
                  <td align="center">
                    {{li.startTime.split(' ')[0]}}&nbsp;
                    {{li.startTime.split(' ')[1]}}-
                    {{li.endTime.split(' ')[1]}}
                  </td>
                  <td align="center">{{li.teacherUserName}}</td>
                  <td align="center" style="color:#0094FF;cursor: pointer;">
                    <span @click="ViewSource(1,li)">查看资源</span>
                  </td>
                  <td align="center" style="color:#0094FF;cursor: pointer;">
                    <span @click="ViewSource(2,li)">查看资源</span>
                  </td>
                  <td align="center" v-if="li.talkcloudRoomId !=null">已创建教室</td>
                  <td align="center" v-else>未创建教室</td>
                </tr>
              </tbody>
              <tbody v-else>
                <tr>
                  <td colspan="11" align="center">暂无数据</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="classtimes" v-else>
        <div
          style="width: inherit;text-align:center;height: 1rem;display: flex;flex-direction:column;justify-content:center; flex-wrap: wrap;align-content:center;"
        >
          <span style="margin-bottom:0.2rem;font-size:0.18rem;color:#333333;">先进行排课，再进行课节设置</span>
        </div>
        <div style="width: inherit;height: 0.5rem;">
          <el-button @click="Scheduling" class="btnOk">排课</el-button>
        </div>
      </div>
    </el-dialog>
    <!--复制课节-->
    <el-dialog
      :visible.sync="copyclasstimes"
      :close-on-click-modal="modalclose"
      custom-class="el-dialog-bg2"
      :before-close="handleClose2"
    >
      <div class="classlist">
        <div class="dialog">
          <span class="spanlabel">请选择班级</span>
          &nbsp;
          <el-select v-model="classname" placeholder="请选择">
            <el-option
              v-for="item in classlist"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div slot="footer" class="footer-btn">
        <el-button @click="copyCancel" class="btnCancel">取 消</el-button>
        <el-button @click="copyOk" class="btnOk">确定复制</el-button>
      </div>
    </el-dialog>
    <!--修改、添加课节名称-->
    <el-dialog
      :visible.sync="addclasstimename"
      :close-on-click-modal="modalclose"
      custom-class="el-dialog-bg3"
      :before-close="handleClose3"
    >
      <div class="addClassTimeName" v-if="addclasstimename">
        <div class="dialog">
          <el-input
            v-model="currentTimename"
            ref="currentTimename"
            style="width:3.5rem;"
            placeholder="请输入课节名称"
          >
            <el-button class="selfBtn" slot="append" @click="Ok">确认</el-button>
          </el-input>
          <!--<el-button style="height: 0.36rem;" ></el-button>-->
        </div>
      </div>
    </el-dialog>
    <!--上传资源-->
    <el-dialog
      custom-class="uploadsource"
      :visible.sync="uploadsource"
      :close-on-click-modal="modalclose"
    >
      <div class="upload">
        <div class="title">添加资源</div>
        <div class="uploadcontent">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item index="1" style="width:50%;text-align: center;">
              <span class="spanlabel">资源上传</span>
            </el-menu-item>
            <el-menu-item index="2" style="width:50%;text-align: center;">
              <span class="spanlabel">H5课件URL</span>
            </el-menu-item>
          </el-menu>

          <div class="uploadfile" v-if="activeIndex==1">
            <!--<span class="spanlabel">资源上传</span><br>-->
            <span class="upload-box">
              <span @click="upload(1)" class="uploadbtn">选择资源</span>
              <input
                hidden
                ref="uploadfile"
                type="file"
                name="file"
                accept="*"
                @change="uploadFile"
              />
            </span>
            <span>{{filename}}</span>
            <el-checkbox v-if="filename" v-model="checked">默认</el-checkbox>
            <!--<div @click="updatedefaultfile" :class="checked?'checkyes':'checkno'">{{filename}}</div>-->
          </div>
          <div class="uploadurl" v-else-if="activeIndex==2">
            <!--<span class="spanlabel">H5课件URL</span><br>-->
            <span class="upload-box">
              <el-input v-model="h5filename" placeholder="请输入H5课件名称" style="width:100%;"></el-input>
            </span>
            <span class="upload-box">
              <el-input v-model="fileurl" placeholder="请输入H5课件URL" style="width:100%;"></el-input>
            </span>
          </div>
        </div>
        <div class="btnPanel">
          <div class="btnOk" @click="uploadOk">确定</div>
          <div style="width:0.2rem;"></div>
          <div class="btnCancel" @click="uploadCancel">取消</div>
        </div>
      </div>
    </el-dialog>
    <!--<classtimes_uploadsource></classtimes_uploadsource>-->
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
let vm;
export default {
  data() {
    return {
      classinfo: null,
      coursetimeSet: true, //是否排课
      modalclose: false,
      copyclasstimes: false, //复制课节
      addclasstimename: false, //添加课节名称
      currentTimename: "", //当前处理的课节名称
      currentRow: null, //选中当前行
      classname: "",
      classlist: [],
      loading: null,
      talkConfig: null, //拓课云配置
      uploadsource: false,
      h5filename: "", //h5课件地址名称
      fileurl: "", //上传文件url
      filename: "", //待上传文件名称
      uploadprogress: 0, //上传进度
      activeIndex: "1", //1.为上传文件2.上传url
      checked: false //是否为默认课件
    };
  },
  methods: {
    /**创建网络教室 */
    createClass() {
      let paras = {
        classSyllabusIdList: [],
        isTrialClass: 0
      };
      vm.tableData.forEach(item => {
        paras.classSyllabusIdList.push(item.classSyllabusId);
      });
      api.createTalkRoomBatch(paras).then(function(data) {
        if (data.resultCode == 2000) {
          vm.$message({
            message: "创建网络教室成功",
            type: "success"
          });
          vm.tableData.forEach(item => {
            item.talkcloudRoomId = "";
          });
        }
      });
    },
    /**课件同步 */
    asyncSyllabus() {
      let paras = {
        classSyllabusIdList: [],
        isTrialClass: 0
      };
      vm.tableData.forEach(item => {
        paras.classSyllabusIdList.push(item.classSyllabusId);
      });
      api.refreshTalkRoomResource(paras).then(function(data) {
        if (data.resultCode == 2000) {
          vm.$message({
            message: "同步资源成功",
            type: "success"
          });
        }
      });
    },
    setClassInfo(data) {
      this.classinfo = data;

      if (!vm.talkConfig) {
        //获取拓课云配置
        api.getTalkYunConfig().then(function(data) {
          vm.talkConfig = data.info;
        });
      }
    },
    handleClose() {
      vm.$store.dispatch("classtimes/hideclasstimesDialogPanel");
      vm.classname = "";
    },
    handleClose2(done) {
      done();
    },
    handleClose3(done) {
      done();
    },
    /**
     * 复制其他班级课节
     */
    copyClassTime() {
      let para = { classId: this.classinfo.classId };
      // api.getCopyClassList(para).then(function(data) {
      //   if (data.result == "操作成功") {
      //     vm.copyclasstimes = true;
      //     vm.classlist = data.list.map(function(row) {
      //       return { label: row.className, value: row.classId };
      //     });
      //   }
      // });

      //	vm.$store.dispatch('classtimes/hideclasstimesDialogPanel');
    },
    /**
     * 取消复制
     */
    copyCancel() {
      vm.copyclasstimes = false;
    },
    /**
     * 确定复制
     */
    copyOk() {
      if (this.classname == "") {
        vm.$message({
          type: "warning",
          message: "请选择班级!"
        });
        return;
      }

      let para = {
        distClassId: this.classinfo.classId,
        srcClassId: this.classname
      };

      api.CopyClassTimes(para).then(function(data) {
        if (data.result == "操作成功") {
          vm.copyclasstimes = false;
          vm.classname = "";
          vm.$store.dispatch("classtimes/gettimetableList", {
            campusId: vm.$store.state.campusId,
            classId: vm.classinfo.classId,
            courseId: vm.classinfo.coursePackageId
          });
        }
      });
    },
    /**
     * 修改课节名称
     */
    modifyName(row) {
      vm.currentRow = row;
      vm.currentTimename = vm.currentRow.classSyllabusName;
      vm.addclasstimename = true;
    },
    /**
     * 新增课节名称
     */
    addName(row) {
      vm.currentRow = row;
      vm.currentTimename = vm.currentRow.classSyllabusName;
      vm.addclasstimename = true;
    },
    /**
     * 确定新增、修改课节名称
     */
    Ok() {
      let $currentTimename = this.$refs.currentTimename;
      let rules = [];

      if ($currentTimename.value.length > 10) {
        rules.push({
          judge: null,
          focus: $currentTimename,
          tips: "课节名称长度最长为10"
        });
      }

      if (!tool.validate(rules)) {
        return;
      }
      vm.currentRow.classSyllabusName = vm.currentTimename;
      api.adjustCourseThistime(vm.currentRow).then(function(data) {
        if (data.result == "操作成功") {
          vm.addclasstimename = false;
        }
      });
      //vm.addclasstimename = false;
    },
    /**
     * 排课
     */
    Scheduling() {
      //vm.$refs.schedulecalendar.init(vm.classinfo);
      vm.$parent.teachingSchedule(vm.classinfo);
      vm.$store.dispatch("classtimes/hideclasstimesDialogPanel");
      //				vm.$refs.courseScheduling.resetPickerOptionTime();

      //				vm.$store.dispatch('courseScheduling/showcourseSchedulingPanel');
    },
    /**
     * 创建课室
     */
    createClassRoom(li) {
      vm.currentRow = li;
      let param = { classSyllabusId: li.classSyllabusId, isTrialClass: 0 };

      api.createTalkyunRoom(param).then(function(data) {
        if (data.result == "操作成功") {
          //刷新页面
          //vm.$parent.classtimesSet(vm.classinfo);
          vm.updateRow(vm.currentRow);
        }
      });
    },
    /**
     * 添加资源
     */
    addResource(li, index) {
      vm.currentRow = li;
      if (vm.currentRow.talkcloudRoomId == null) {
        vm.$message({
          message: "请先创建课室",
          type: "warning"
        });
        return;
      }

      vm.uploadsource = true;
      //	this.$refs.uploadfile.dispatchEvent(new MouseEvent('click'));
    },
    /**
     * 上传调用
     */
    upload(index) {
      if (index == 1) {
        //文件上传
        this.$refs.uploadfile.dispatchEvent(new MouseEvent("click"));
      } else if (index == 2) {
        //url上传
      }
    },
    /**
     * 添加资源
     */
    uploadFile(e) {
      const file = e.target.files[0];
      if (!file.type) {
        alert("请选择文件");
        return;
      }
      vm.filename = file.name;
      let roomid = Number(vm.currentRow.talkcloudRoomId);
      vm.filedata = new FormData(); //创建form对象
      vm.filedata.append("file", file); //通过append向form对象添加数据
      vm.filedata.append("key", vm.talkConfig.key); //企业ID
      vm.filedata.append("conversion", 1); //是否转换
      vm.filedata.append("isopen", 0); //是否公开文档
      vm.filedata.append("serial", roomid); //房间号
      vm.filedata.append("dynamicppt", 0); //0是否是非动态ppt 1是动态ppt
    },
    /**
     * 更新行
     */
    updateRow(row) {
      let param = { classSyllabusId: vm.currentRow.classSyllabusId };

      api.getClasssyllabusInfo(param).then(function(data) {
        if (data.result == "操作成功") {
          for (let i = 0; i < vm.tableData.length; i++) {
            if (
              vm.tableData[i].classSyllabusId == vm.currentRow.classSyllabusId
            ) {
              vm.tableData[i].classResourcesDtoList =
                data.info.classResourcesDtoList;
              vm.tableData[i].talkcloudRoomId = data.info.talkcloudRoomId;
            }
          }
        }
      });
    },
    /**
     * 查看教参、课节资源
     */
    ViewSource(index, li) {
      console.log(li);
      let param = { show: true, index: index, classSyllabus: li };

      this.$emit("callback", param);
    },
    /**
     * 确认上传
     */
    uploadOk() {
      let configfile = {
        //上传文件
        headers: { "Content-Type": "multipart/form-data" },
        baseURL: vm.talkConfig.url,
        withCredentials: false,
        onUploadProgress: uploadProgress
      };
      let configurl = {
        //上传url
        headers: { "Content-Type": "multipart/form-data" },
        baseURL: vm.talkConfig.url,
        withCredentials: false
      };

      function uploadProgress(progressEvent) {
        //上传进度回调
        let progress = progressEvent;
        let loaded = progress.loaded;
        let total = progress.total;
        let rate = (loaded / total).toFixed(2) * 100;
        vm.uploadprogress = rate;

        vm.$nextTick(function() {
          //dom更新完毕回调
          $(".el-loading-text").text("正在" + vm.uploadprogress + "上传");
          if (vm.uploadprogress == 100) {
            vm.loading.close();
          }
        });
      }

      if (vm.activeIndex == "1") {
        //资源上传

        if (vm.filedata != null) {
          //判断是否上传文件
          vm.loading = this.$loading({
            lock: true,
            text: "正在" + vm.uploadprogress + "上传",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          uploadtalkyun();
        } else {
          vm.$message({
            message: "请选择文件",
            type: "warning"
          });
        }
      } else if (vm.activeIndex == "2") {
        //h5url上传
        if (vm.fileurl != "") {
          //判断是否上传url
          uploadurl();
        } else {
          vm.$message({
            message: "请输入h5课件URL",
            type: "warning"
          });
        }
      }

      function uploadtalkyun() {
        //上传文件
        if (vm.checked) {
          vm.filedata.append("isdefault", 1); //0是非默认文件 1是默认文件
        } else {
          vm.filedata.append("isdefault", 0); //0是非默认文件 1是默认文件
        }
        api
          .uploadTalkCloud(vm.filedata, configfile)
          .then(function(data) {
            //vm.loading.close();

            if (data.result == -1) {
              vm.$message({
                message: "上传资源失败",
                type: "error"
              });
              return;
            }
            vm.$message({
              message: "上传资源成功",
              type: "success"
            });
            vm.updateRow(vm.currentRow);
            vm.uploadsource = false;
            vm.filedata = null;
            vm.fileurl = "";
            vm.filename = "";
            vm.h5filename = "";
            vm.checked = false;
          })
          .catch(function(errdata) {
            //vm.loading.close();
            console.log(errdata);
            vm.$message({
              message: "上传资源失败",
              type: "error"
            });
            vm.uploadsource = false;
            vm.filedata = null;
            vm.fileurl = "";
            vm.filename = "";
            vm.h5filename = "";
            vm.checked = false;
          });
      }

      function uploadurl() {
        //上传url
        let roomid = Number(vm.currentRow.talkcloudRoomId);
        vm.filedata = new FormData(); //创建form对象
        vm.filedata.append("key", vm.talkConfig.key); //企业ID
        vm.filedata.append("serial", roomid); //房间号
        vm.filedata.append("fileurl", vm.fileurl); //文件地址
        vm.filedata.append("name", vm.h5filename); //h5文件名称

        api
          .uploadurlTalkCloud(vm.filedata, configurl)
          .then(function(data) {
            //vm.loading.close();
            vm.$message({
              message: "上传H5课件URL成功",
              type: "success"
            });
            vm.updateRow(vm.currentRow);
            vm.uploadsource = false;
            vm.filedata = null;
            vm.fileurl = "";
            vm.filename = "";
            vm.h5filename = "";
            vm.checked = false;
          })
          .catch(function(errdata) {
            //vm.loading.close();
            vm.$message({
              message: "上传H5课件URL失败",
              type: "error"
            });
            vm.uploadsource = false;
            vm.filedata = null;
            vm.fileurl = "";
            vm.filename = "";
            vm.h5filename = "";
            vm.checked = false;
          });
      }
    },
    /**
     * 取消上传
     */
    uploadCancel() {
      vm.uploadsource = false;
      vm.filedata = null;
      vm.fileurl = "";
      vm.filename = "";
      vm.h5filename = "";
      vm.checked = false;
    },
    /**
     *上传选项
     */
    handleSelect(key, keyPath) {
      vm.activeIndex = key + "";
    },
    /**
     * 默认课件选择
     */
    defaultFile(li, row) {
      let list = li.classResourcesDtoList;
      //样式页面样式更新
      for (let i in list) {
        if (list[i].fileId == row.fileId) {
          list[i].defaultType = 1;
        } else {
          list[i].defaultType = 0;
        }
      }

      //接口数据更新
      let configparam = {
        talkcloudRoomId: li.talkcloudRoomId,
        fileId: row.fileId
      };
      console.log(configparam);
      api.updatedefaultfile(configparam).then(function(data) {
        //console.log(data)
        if (data.resultCode == 2000) {
          vm.$message({
            message: "设置默认文件成功",
            type: "success"
          });
        }
      });
    },
    /**
     * 上传默认文件
     */
    updatedefaultfile() {
      if (vm.checked) {
        vm.checked = false;
      } else {
        vm.checked = true;
      }
    }
  },
  computed: {
    ...mapState({
      isShow: state => state.classtimes.classtimesDialog,
      tableData: state => state.classtimes.timetableList
    }),
    dialogclass: function() {
      let cls = "";
      if (this.tableData.length > 0) {
        cls = "el-dialog-bg";
      } else {
        cls = "unel-dialog-bg";
      }
      return cls;
    }
  },
  mounted() {
    vm = this;
  }
};
</script>

<style lang="scss">
@import "@/style/module/utils.scss";
.classtimescontainer {
  .classtimes {
    width: inherit;

    padding: 0 0.31rem 0.3rem 0.31rem;
    .btnOk {
      width: 1.6rem;
      font-size: 0.2rem;
      background: #3885f8;
      color: #ffffff;
      font-weight: bold;
      border-radius: 0.1rem;
      position: absolute;
      left: 50%;
      margin-left: -0.8rem;
    }
    .btnOk:hover {
      background: rgba(56, 133, 248, 0.8);
    }
    .copybtnBox {
      height: 0.5rem;
      width: 100%;
      .copybtn {
        float: right;
        height: 0.4rem;
        width: 1.6rem;
        background: #3885f8;
        border-radius: 0.1rem;
        text-align: center;
        color: #ffffff;
        margin-right: 0.1rem;
        line-height: 0.4rem;
        font-size: 0.16rem;
        cursor: pointer;
      }
      .copybtn:hover {
        background: rgba(56, 133, 248, 0.8);
      }
    }
    .classtimestable {
      height: auto;
      width: inherit;
      .checkyes {
        background: url(../../../assets/img/education_manage/check_yes.png);
        height: 0.3rem;
        width: auto;
        background-repeat: no-repeat;
        background-position-x: right;
        background-position-y: 0.08rem;
        line-height: 0.3rem;
      }
      .checkno {
        background: url(../../../assets/img/education_manage/check_no.png);
        height: 0.3rem;
        width: auto;
        background-repeat: no-repeat;
        background-position-x: right;
        background-position-y: 0.08rem;
        line-height: 0.3rem;
      }
      .file {
        position: relative;
        background: #d0eeff;
        border: 1px solid #99d3f5;
        border-radius: 0.3rem;
        overflow: hidden;
        color: rgb(0, 148, 255);
        text-decoration: none;
        text-indent: 0;
        line-height: 20px;
        background: none;
        border: none;
      }
      .file input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
      }
      /*.file:hover {
				    background: #AADFFD;
				    border-color: #78C3F3;
				    color: #004974;
				    text-decoration: none;
				}*/
    }
  }

  .classlist {
    width: inherit;
    height: 1.5rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    align-items: baseline;
    .el-select {
      margin-top: 0.5rem;
    }
  }
  .addClassTimeName {
    width: inherit;
    height: 2rem;
    .dialog {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -0.21rem;
      margin-left: -1.8rem;
      .el-input__inner {
        border-bottom-right-radius: 0rem;
        border-top-right-radius: 0rem;
      }
      .el-input-group__append,
      .el-input-group__prepend {
        background: #5f9df9;
        color: #ffffff;
      }
    }
  }

  /**自定义对话框标题样式**/
  .panel_title {
    padding: 0.23rem 0.31rem 0.23rem 0.31rem;
    font-size: 0.22rem;
    font-family: "microsoft yahei";
    color: #333333;
  }
  /**
		 * 自定义对话框样式
		 */
  .el-dialog-bg {
    background: #ffffff;
    width: 12rem;
    border-radius: 0.1rem;
    .el-dialog__header {
      padding: 0px;
    }
    .el-dialog__body {
      padding: 0px !important;
    }
    .el-dialog__footer {
      padding: 0.3rem;
      .footer-btn {
        width: 100%;
        text-align: center;
      }
    }
  }
  .unel-dialog-bg {
    /**未排课**/
    background: #ffffff;
    width: 4rem !important;
    border-radius: 0.1rem;
    .el-dialog__header {
      padding: 0px;
    }
    .el-dialog__body {
      padding: 0px !important;
    }
    .el-dialog__footer {
      padding: 0.3rem;
      .footer-btn {
        width: 100%;
        text-align: center;
      }
    }
  }
  .el-dialog-bg2 {
    margin-top: 20vh !important;
    background: #ffffff;
    width: 5rem !important;
    border-radius: 0.1rem;
    .el-dialog__header {
      padding: 0px;
    }
    .el-dialog__body {
      padding: 0px !important;
    }
    .el-dialog__footer {
      padding: 0rem 0.3rem 0.3rem 0.3rem;
      .footer-btn {
        width: 100%;
        text-align: center;
      }
    }
  }
  .el-dialog-bg3 {
    margin-top: 20vh !important;
    background: #ffffff;
    width: 5rem !important;
    border-radius: 0.1rem;
    .el-dialog__header {
      padding: 0px;
    }
    .el-dialog__body {
      padding: 0px !important;
    }
    .el-dialog__footer {
      padding: 0rem 0.3rem 0.3rem 0.3rem;
      .footer-btn {
        width: 100%;
        text-align: center;
      }
    }
  }
  .uploadsource {
    width: 5rem !important;
    border-radius: 0.1rem;
    .el-dialog__header {
      padding: 0px;
    }
    .el-dialog__body {
      padding: 0px !important;
    }
    .el-dialog__footer {
      padding: 0rem 0.3rem 0.3rem 0.3rem;
      .footer-btn {
        width: 100%;
        text-align: center;
      }
    }
  }

  .upload {
    width: 100%;
    height: 3rem;
    .title {
      width: 100%;
      height: 0.5rem;
      line-height: 0.5rem;
      padding: 0rem 0.3rem;
      font-size: 0.2rem;
      font-weight: bold;
      color: #333333;
    }
    .uploadcontent {
      width: 100%;
      height: 1.5rem;
      padding: 0rem 0.3rem;
      .uploadfile {
        width: 100%;
        height: 0.75rem;
        line-height: 1rem;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .upload-box {
          .uploadbtn {
            padding: 0.08rem 0.5rem;
            color: #ffffff;
            cursor: pointer;
            width: 1rem;
            height: 0.36rem;
            background: #5f9df9;
            border-radius: 0.05rem;
          }
          .file {
            position: relative;
            background: #d0eeff;
            border: 1px solid #99d3f5;
            border-radius: 0.3rem;
            overflow: hidden;
            color: rgb(0, 148, 255);
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            background: none;
            border: none;
          }
          .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
          }
        }
      }
      .uploadurl {
        width: 100%;
        height: 0.75rem;
        line-height: 0.6rem;
        .upload-box {
          .el-input__inner {
            border-radius: 0.05rem;
            font-size: 0.16rem;
            color: #666666;
            height: 0.36rem !important;
            line-height: 0.36rem;
          }
        }
      }
    }
    .btnPanel {
      width: 100%;
      height: 1rem;
      display: inline-flex;
      line-height: 1rem;
      justify-content: center;
      align-items: center;
      .btnOk {
        width: 1.6rem;
        height: 0.4rem;
        font-size: 0.16rem;
        background: #3885f8;
        color: #ffffff;
        border-radius: 0.1rem;
        line-height: 0.4rem;
        text-align: center;
        cursor: pointer;
      }
      .btnOk:hover {
        background: rgba(56, 133, 248, 0.8);
      }
      .btnCancel {
        width: 1.6rem;
        height: 0.4rem;
        font-size: 0.16rem;
        background: #ffffff;
        border-radius: 0.1rem;
        color: #333333;
        border: 0.01rem solid #c0c4cc;
        line-height: 0.4rem;
        text-align: center;
        cursor: pointer;
      }
      .btnCancel:hover {
        background: rgba(56, 133, 248, 0.1);
      }
    }
  }
}
</style>